<template>
  <div class="monitor-cont">
    <div class="card-header">主机管理</div>
    <div class="tab-cont">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="添加主机" name="add">添加主机 </el-tab-pane>
        <el-tab-pane label="主机列表" name="list">
          <el-table
            :data="list"
            :header-cell-style="headerRowStyle"
            style="width: 100%"
          >
            <el-table-column prop="no" label="序号"> </el-table-column>
            <el-table-column prop="ip" label="主机IP"> </el-table-column>
            <el-table-column prop="status" label="连接状态" align="center">
              <template slot-scope="scope">
                <div class="status">
                  <div v-if="scope.row.status == 0" class="linked">
                    已连接
                  </div>
                  <div v-else class="disconnect">
                    已断开
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div
        class="arrow-left"
        @click="drawer = true"
        v-if="!drawer && activeName == 'add'"
      >
        <i class="el-icon-arrow-left"> </i>
      </div>

      <div style="width:30vw">
        <el-drawer
          :visible.sync="drawer"
          :modal="false"
          :show-close="false"
          :wrapperClosable="true"
          :modal-append-to-body="false"
          :direction="direction"
          append-to-body
        >
          <div class="pos">
            <div slot="title" class="title">
              添加主机
            </div>
            <div class="arrow" @click="drawer = false">
              <i class="el-icon-arrow-right"> </i>
            </div>
            <div class="drawer-content">
              在目标主机的任意路径下（工作空间）执行如下命令将自动链接该主机
              <div class="content"></div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "add",
      drawer: false,
      direction: "rtl",
      show: true,
      list: [
        {
          no: "001",
          ip: "117.67.158.221",
          status: "0",
        },
        {
          no: "002",
          ip: "117.67.158.221",
          status: "1",
        },
      ],
      headerRowStyle: {
        background: "rgb(245,246,250)",
      },
    };
  },
  methods: {
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
